<template>
    <div class="login-container">
        <!-- 导航栏 -->
     <van-nav-bar
       class="page-nav-bar"
       title="登录"
      >
      <!-- 插槽 -->
      <template #left>
        <van-icon name="cross" @click="$router.back()"/>
      </template>

    </van-nav-bar>
     <!-- 登录表单 -->
     <!-- 
         表单验证：
          1.给van-file 组件配置 rules 验证规则
          https://vant-contrib.gitee.io/vant/v2/#/zh-CN/form#rule-shu-ju-jie-gou
          2.当表单提交的时候会自动触发表单验证
            如果验证通过，会触发submit 事件
            如果验证失败，不会触发submit
      -->
     <van-form  ref="loginForm" @submit="onSubmit">
          <van-field
            v-model ="user.mobile"
            name="moblie"
            placeholder="请输入手机号"
            left-icon="phone-o"
            :rules="userFormRules.mobile"
            type="number"
            maxlength="11"
          >       
        </van-field>

          <van-field
            v-model="user.code"
            name="code"
            placeholder="请输入验证码"
            left-icon="contact"
            :rules="userFormRules.code"
            type="number"
            maxlength="6"
           >
          <template #button>
            <!-- 
                time：倒计时时间
                finish 倒计时结束事件
             -->
            <van-count-down
             v-if="isCountDownShow"
            :time="1000 * 60"  
            format="ss s"
            @finish="isCountDownShow = false"
            />
            <!-- 如果isCountDownShow 为真显示倒计时 否则显示发生验证码 -->
             <van-button 
              v-else 
              class="send-sms-btn"
              native-type="button"
              round 
              size="small" 
              type="default"
              @click="onSendSms"
              >发送验证码</van-button>
        </template>
        </van-field>


          <div  class="login-btn-wrap">
            <van-button  class="login-btn" block type="info" native-type="submit"> 登录 </van-button>
          </div>
</van-form>


 </div>
</template>



<script>
import { login, sendSms } from '@/api/user'

    export default {
        name: 'LoginIndex',
        comments:{},
        props:{},
        data() {
            return{
              user:{
                mobile:'13911111111', //手机号
                code: '246810' // 验证码
             },
            
              userFormRules: {
                 mobile: [{ 
                     required: true,
                     message: '手机号不能为空' 
                    },{
                        pattern: /^1[3|5|7|8]\d{9}$/,
                        message: '手机格式错误'
                    }], 
                 code:  [{
                      required: true,
                      message: '验证码不能为空'

                     },{
                        pattern: /^\d{6}$/,
                        message: '验证码格式错误'
                     }]
               },
               // 是否展示倒计时
               isCountDownShow: false
            }
        },
        computed:{},
        watch:{},
        created(){},
        mounted(){},
        methods:{
          async  onSubmit() {
                 //1.获取表单数据
                  const user = this.user
                 //2.表单验证

                 //在组件中通过 this.$toast 调用Toast
                 this.$toast.loading({
                  message: '网络有点慢在等等！！！',
                  forbidClick: true, // 禁用背景点击
                  duration: 0 // 持续时间 默认2000(2秒),如果为0 则持续展示
                });
                 //3.提交表单请求登录
                 try {
                    const {data} = await login(user)
                     // 登录成功将data里面的token存到vuex中
                       this.$store.commit('setUser',data.data)

                    // console.log("登录成功",data);
                     this.$toast.success('"恭喜你登录成功，嘿嘿~')
                      //登录成功，跳回原来的页面
                      this.$router.back()
                    //  this.$router.push('/home')
                 } catch (err) {
                     if(err.response.status === 400) {
                        this.$toast.fail('手机号或验证码错误')
                      
                     } else {
                        this.$toast.fail('很遗憾登录失败,请稍后重试')
                     }     
                 }

                 //4.根据请求响应结果处理后续操作
              },

           async  onSendSms() {
                // 1.验证手机号
                  try{

                      // validate 传参验证 会返回一个promise
                     await this.$refs.loginForm.validate('moblie')
                      console.log("验证通过");
                  } catch(err) {
                      console.log("验证失败",err);
                        return // 失败下面代码就不再执行了
                   }
              
                // 2.验证通过，显示倒计时
                  this.isCountDownShow = true

                // 3.请求发送验证码
                  try{
                    const res = await sendSms(this.user.mobile)
                    this.$toast('发送成功')
                     console.log("发送成功",res);
                  } catch(err) {
                    //  发送失败，关闭倒计时
                    this.isCountDownShow = false
                     if(err.response.status === 429) {
                      this.$toast('发送太频繁了,请稍后再试')
                     } else {
                        this.$toast('发送失败,请稍后再试')
                     }
                  } 
              }
        }  
    }
</script>

<style lang="less">
    
    .login-container {
           
        .send-sms-btn {
             width: 180px;
             height: 46px;
             line-height: 46px;
             font-size: 22px;
             color: #666;
             background: #ededed;
        }

        .login-btn-wrap {
             padding: 53px 33px;
             .login-btn {
                 background: pink;
                 border: none;
             }
        }
    }
</style>

